<template>
    <div class="">
        <!-- Navbar content -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark menu_box">

            <div class="img_logo">
                <img src="..\..\assets\img\back\back_logo2.png" alt="">
            </div>

            <a class="navbar-brand" href="#">博客后台管理系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse " id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link " href="#/blogs" target="_blank">主页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.baidu.com" target="_blank">友情链接</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">good luck!</a>
                    </li>
                </ul>

                <div class="form-inline my-2 my-lg-0 col-md-9">
                    <!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> -->

                    <div class="input-group col-md-6 ">
                        <input type="text" class="form-control " placeholder="Just for fun！" aria-label="Recipient's username" aria-describedby="button-addon2"
                        @focus="input_focus" @blur="input_blur" :class="[is_input_focus ? 'col-md-10':'col-md-7', 'input_len']">
                        <div class="input-group-append ">
                            <button class="btn btn-info " type="button" id="button-addon2">
                                <i class="el-icon-search"></i>
                            </button>
                        </div>
                    </div>
                    <!-- 占位 -->
                    <div class=" col-md-1"></div>
                    <div class="form-inline  col-md-5">
                        <el-dropdown >
                            <el-badge :value="200" :max="99" class="btn_margin">
                                <el-button type="primary" icon="el-icon-message" class="" circle></el-button>
                            </el-badge>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-phone-outline">新邮件</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-platform-eleme">饿了吗</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                        <el-dropdown>
                            <el-badge :value="100" :max="10" class="btn_margin">
                                <el-button type="warning" icon="el-icon-bell" class="" circle></el-button>
                            </el-badge>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-warning-outline">新投诉</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-s-comment">新评论</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-s-data">数据更新</el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>

                        <!-- ml-auto用于右靠 -->
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {{this.$store.state.user.userInfo.username}}
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#/user/UserDetail" target="_blank"><i class="el-icon-user-solid"></i> 个人信息</a>
                                    <a class="dropdown-item" @click="toPasswordDialog()"><i class="iconfont icon-lock_fill"></i> 修改密码</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item"  @click="toHelpDialog()"><i class="el-icon-s-help"></i> 帮助</a>
                                </div>
                            </li>
                        </ul>
                        <button class="btn btn-outline-success my-2 my-sm-0 ml-auto" type="submit" @click="logout">
                            <i class="el-icon-caret-left"></i>
                            退出
                            <i class="el-icon-caret-right"></i>
                        </button>
                    </div>

                </div>

            </div>
        </nav>

        <!-- 帮助提示对话框 -->
        <el-dialog
            title="帮助提示"
            :visible.sync="HelpDialogVisible"
            width="30%">
            <span>忆点点博客，体验版，仍有很多功能待开发。。。。</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="HelpDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改密码提示框 -->
        <el-dialog
            title="修改密码"
            :visible.sync="passwordDialogVisible"
            width="30%"
            @close="closePasswordDialog()">
            <el-form :model="passwordForm" :rules="passwordFormRules" ref="passwordFormRef"
            class="passwordFormClass"
             label-width="100px" label-position="left">
                <el-form-item label="旧密码：" prop="oldPass">
                    <el-input v-model="passwordForm.oldPass" autocomplete="off"
                    placeholder="旧密码" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码：" prop="pass">
                    <el-input v-model="passwordForm.pass" autocomplete="off"
                    placeholder="新密码" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="checkPass">
                    <el-input v-model="passwordForm.checkPass" autocomplete="off"
                    placeholder="确认密码" type="password" show-password></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updatePassword()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
  data () {
    // 确认密码验证
    var validateRePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空'))
      } else if (value !== '' && value !== this.passwordForm.pass) {
        // console.log('确认密码验证')
        callback(new Error('确认密码与密码不一致！'))
      }
      callback()
    }
    return {
      is_input_focus: false,
      // 帮助提示框
      HelpDialogVisible: false,
      // 显示与隐藏修改密码
      passwordDialogVisible: false,
      // 密码表单
      passwordForm: {
        oldPass: '',
        pass: '',
        checkPass: ''
      },
      passwordFormRules: {
        oldPass: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { validator: validateRePassword, trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 打开帮助提示框
    toHelpDialog () {
      this.HelpDialogVisible = true
    },
    // 打开修改密码提示框
    toPasswordDialog () {
      this.passwordDialogVisible = true
    },
    // 关闭修改密码提示框
    closePasswordDialog () {
      this.$refs.passwordFormRef.resetFields()
    },
    // 更新密码
    updatePassword () {
      this.$refs.passwordFormRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post('/user/updatePassword', {
            oldPassword: this.passwordForm.oldPass,
            newPassword: this.passwordForm.checkPass
          })
          //   console.log('修改密码', res)
          if (res.code !== 200) {
            return this.$message.error('密码修改失败，原密码错误！')
          } else {
            this.$message.success('密码修改成功，建议重新登陆！')
            this.passwordDialogVisible = false
          }
        }
      })
    },
    input_focus () {
      this.is_input_focus = true
    },
    input_blur () {
      this.is_input_focus = false
    },
    search () {
      this.is_input_focus = true
    },
    // 退出登陆
    async logout () {
      const { data: res } = await this.$http.post('/logout')
      console.log('退出登陆', res)
      if (res.code !== 200) return
      this.$message.success('退出成功！')
      window.localStorage.clear()
      // 删除vuex里的用户数据
      this.$store.commit('clearUserInfo')

      this.$router.push('/login')
      // window.location.reload()
    }
  },
  created () {
    this.is_input_focus = false
  }
}
</script>

<style lang="less" scoped>
.menu_box{
    height: 70px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    z-index: 9;
    .navbar-brand{
        font-size: 1.5em;
    }
}
.img_logo{
    width: 70px;
    height: 65px;
    margin-left: 5px;
    margin-right: 20px;
    img{
        width: 100%;
        height: inherit;
    }
}
.input_len{
    // 样式变化过度效果
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.el-button{
    outline: none;
}
.btn_margin{
    margin-right: 25px;
}
a{
    cursor: pointer;
}
.passwordFormClass{
    padding-right: 20px;
}
</style>
